<template>
  <div>
    <div class="row">
      <div class="c1">
        <el-form ref="form" :model="form" label-width="80px" v-loading="loading" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入商品名称" maxlength="255" show-word-limit />
          </el-form-item>
          <el-form-item label="品牌log" prop="logo">
            <upload v-model="form.logo" cropper />
          </el-form-item>
        </el-form>
      </div>
      <div class="c2">
        <el-card>
          <div slot="header" class="cardHeader">
            <span>分类列表</span>
            <el-button icon="el-icon-plus" class="addClassify" type="text" @click="showClassifySelect = true">新增分类</el-button>
          </div>
          <template>
            <el-tag v-for="tag in form.classifys" :key="tag"> {{ classifyMap.find((e) => e.id == tag).name }} </el-tag>
          </template>
        </el-card>
      </div>
    </div>

    <div class="center-text">
      <el-button type="success" @click="save"> 保 存 </el-button>
      <el-button v-if="form.id" type="warning" @click="init"> 恢 复 </el-button>
      <el-button @click="cancel"> 取 消 </el-button>
    </div>
    <el-dialog v-dialogDrag title="选择分类" :visible.sync="showClassifySelect" class="classify-select-dialog">
      <template>
        <classify-select ref="classifySelect" v-model="classifyid" />
      </template>
      <template #footer>
        <el-button @click="showClassifySelect = false">取 消</el-button>
        <el-button type="primary" @click="addClassify">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'
import { brandAdd, brandModify, brandFromid } from '@/api/brand'
import upload from '@/components/upload.vue'
import ClassifySelect from '@/components/ClassifySelect.vue'
export default {
  components: { VueCropper, upload, ClassifySelect },
  data() {
    return {
      form: {
        id: '',
        name: '',
        logo: '',
        classifys: [],
      },
      classifyid: '',
      classifyMap: [],
      showClassifySelect: false,
      loading: false,
      rules: {
        name: [
          { required: true, message: '请输入品牌名', trigger: 'blur' },
          { min: 2, message: '品牌名长度限制2-255', trigger: 'blur' },
        ],
        logo: [{ required: true, message: '请输填入logo', trigger: 'blur' }],
      },
    }
  },
  methods: {
    async init() {
      const { id } = this.query
      if (id === 'new') return
      this.loading = true
      const data = await brandFromid({ id })
      if (data.code === 431) return this.$router.replace({ name: '404' })
      if (data.code !== 200) return this.$message.error('获取商品详情失败,错误码:' + data.code)
      this.loading = false
      this.classifyMap = data.data.classifyList
      this.form = data.data
    },
    // 保存
    async save() {
      this.$refs.form
        .validate()
        .then(async () => {
          this.loading = true
          const data = this.form.id ? await brandModify(this.form) : await brandAdd(this.form)
          if (data.code !== 200) return this.$message.error('保存失败,稍后重试,错误码:' + data.code)
          this.$message.success('保存成功')
          this.$router.push({ name: 'brand-exhibit' })
        })
        .catch(() => {})
    },
    /**添加分类 */
    addClassify() {
      const id = this.classifyid
      if (!id) return this.$message.warning('请选择完整分类')
      const classify = this.$refs.classifySelect.list[2].find((e) => e.id == id)
      this.classifyMap.push(classify)
      this.form.classifys.push(id)
      this.showClassifySelect = false
    },
    /**取消 */
    cancel() {
      this.$router.push({ name: 'brand-exhibit' })
    },
  },
  watch: {
    '$route.params': {
      immediate: true,
      deep: true,
      handler(value) {
        console.log(value)
        this.query = { ...value }
        this.init()
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.el-tag {
  margin: 3px 0;
  margin-right: 6px;
}
.row {
  display: flex;
  .c1 {
    flex: 1;
  }
  .c2 {
    margin-left: 16px;
    width: 300px;
  }
}
.el-card {
  min-height: 260px;
  .cardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
::v-deep {
  .classify-select-dialog {
    .el-dialog {
      width: 330px;
      .el-select {
        margin-bottom: 8px;
        width: 290px;
      }
      .select-box:last-of-type {
        .el-select {
          margin-bottom: 8px;
          width: auto;
        }
      }
    }
  }
}
.crop-demo {
  display: flex;
  align-items: flex-end;
}
.pre-img {
  width: 100px;
  height: 100px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 5px;
}
.crop-demo-btn {
  position: relative;
  width: 100px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  margin-left: 30px;
  background-color: #409eff;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  box-sizing: border-box;
}
.crop-input {
  position: absolute;
  width: 100px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
